import React from 'react';
import * as Icons from '@ant-design/icons';

const iconList = Object.keys(Icons).filter(name => name.endsWith('Outlined'));

const IconSelect: React.FC<{ value?: string; onChange?: (val: string) => void }> = ({ value, onChange }) => (
  <div style={{ maxHeight: 200, overflow: 'auto', display: 'flex', flexWrap: 'wrap' }}>
    {iconList.map(name => {
      const IconComp = (Icons as any)[name];
      return (
        <span
          key={name}
          style={{
            margin: 8,
            border: value === name ? '2px solid #1890ff' : '1px solid #eee',
            padding: 4,
            borderRadius: 4,
            cursor: 'pointer',
            display: 'inline-block'
          }}
          onClick={() => onChange?.(name)}
        >
          <IconComp style={{ fontSize: 20 }} />
          <div style={{ fontSize: 10 }}>{name.replace('Outlined', '')}</div>
        </span>
      );
    })}
  </div>
);

export default IconSelect; 